<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>校园交流平台</title>
    <link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon" />
    <script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
    <!-- 引入vuejs -->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- 引入element样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入element组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
    <div id="app" v-cloak>
        <div class="center">
            <el-row>
                <el-col :span="18" :offset="3">
                    <div class="titlediv">校园交流平台</div>
                </el-col>
            </el-row>
            <el-row class="userinput">
                <el-col :span="18" :offset="3">
                    <el-input placeholder="请输入用户名" prefix-icon="el-icon-user" v-model="user.userName" 
                    @keyup.enter.native="nextInput" ref="usernameInput" clearable></el-input>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="18" :offset="3">
                    <el-input placeholder="请输入密码" prefix-icon="el-icon-lock" v-model="user.password" 
                    @keyup.enter.native="isRegist?regist():login()" ref="passwordInput" show-password clearable></el-input>
                </el-col>
            </el-row>
            <el-row v-if="!isRegist">
                <el-col :span="10" :offset="7">
                        <el-button icon="el-icon-thumb" class="loginbut" type="primary" @click="login">登录</el-button>
                </el-col>
            </el-row>
            <el-row v-if="isRegist">
                <el-col :span="10" :offset="7">
                        <el-button icon="el-icon-edit-outline" class="loginbut" type="primary" @click="regist">注册</el-button>
                </el-col>
            </el-row>
            <el-row v-if="!isRegist">
                <el-col :span="5" :offset="16">
                    <el-link type="primary" class="toRegist"  @click="switching">没有帐号？注册</el-link>
                </el-col>
            </el-row>
            <el-row v-if="isRegist">
                <el-col :span="5" :offset="16">
                    <el-link type="primary" class="toRegist"  @click="switching">已有帐号？登录</el-link>
                </el-col>
            </el-row>
        </div>
    </div>
    <script>
    new Vue({
            el:'#app',
            data(){
                return{
                    user:{
                        userName:'',
                        password:''
                    },
                    isRegist:false
                }
            },
            mounted:function(){
                this.$refs.usernameInput.focus();
            },
            methods:{
                //登录
                login(){
                    var _this=this;
                    var param=JSON.stringify(_this.user);
                    $.ajax({
                        url: "login",
                        type: "POST",
                        contentType:'application/json;charset=UTF-8',
                        data: param,
                        dataType:'JSON',
                        success: function(data) {
                            //验证成功则跳转
                            if(data.success){
                                _this.$message.success(data.message);
                                window.location.href="index";
                            }else{
                                _this.$message.error(data.message);
                            }
                        }
                    });
                },
                //注册
                regist(){
                    var _this=this;
                    if(_this.user.userName.length>20){
                        _this.$message.warning("用户名不能超过20位！");
                        _this.$refs.usernameInput.focus();
                        _this.$refs.usernameInput.select();
                        return false;
                    }
                    if(_this.user.password.length>20){
                        _this.$message.warning("密码不能超过20位！");
                        _this.$refs.passwordInput.focus();
                        _this.$refs.passwordInput.select();
                        return false;
                    }
                    var param=JSON.stringify(_this.user);
                    $.ajax({
                        url: "regist",
                        type: "POST",
                        contentType:'application/json;charset=UTF-8',
                        data: param,
                        dataType:'JSON',
                        success: function(data) {
                            //验证成功则跳转
                            if(data.success){
                            	_this.isRegist=false;
                                _this.$message.success(data.message);
                            }else{
                                _this.$message.error(data.message);
                            }
                        }
                    });
                },
                //触发密码输入框的获取焦点
                nextInput(){
                    this.$refs.passwordInput.focus();
                },
                //转换成注册
                switching(){
                    this.isRegist=!this.isRegist;
                }
            }
        })
    </script>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        body {
            background-color: #e2e7bf;
            background-image: url(images/lbg.png);
            background-size:100%;
            background-repeat: no-repeat;
        }
        .center {
            width: 680px;
            height: 310px;
            margin: 100px auto;
            padding: 10px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 25px;
        }
        .el-row {
            text-align: center;
            margin-bottom: 20px;
        }
        .userinput{
            margin-top: 50px;
        }
        .loginbut{
            width: 100%;
            height: 100%;
        }
        .titlediv{
            width: 100%;
            height: 100%;
            color: #409EFF;
            font-size: 23px;
            margin-top: 20px;
            font-weight: 600;
        }
        .toRegist{
            font-size: 14.5px;
        }
    </style>
</body>
</html>